<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>SeekAsia - Admin</title>
  </head>
  <body>
    <link href="./libs/style/zTreeStyle-3.5.42.css" rel="stylesheet">
    <link href="./assets/css/style.bundle.css" rel="stylesheet">
    
    <script type="text/javascript" src="./libs/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./libs/js/common.js"></script>
    <script type="text/javascript" src="./libs/js/bootstrap-4.5.2.min.js"></script>
    <script type="text/javascript" src="./libs/js/jquery.ztree.core-3.5.42.min.js"></script>
    <script type="text/javascript" src="./sudo/Bmob-2.2.5.min.js"></script>
    <script type="text/javascript" src="./sudo/BmobHelper.js"></script>
    <script type="text/javascript" src="./libs/js/FileSaver.min.js"></script>

    <script type="text/javascript">

    var bmobHelper = new BmobHelper();
    
    var setting = {
            data: {
                key: {
                    title:"desc"
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"普通的父节点", desc:"我很普通，随便点我吧", isCollapse:true, uri: 'fe', desc:'dd', status: 1},
            { id:11, pId:1, name:"叶子节点 - 1", desc:"我很普通，随便点我吧", isCollapse:false, status:1},
            
            { id:2, pId:0, name:"NB的父节点", desc:"点我可以，但是不能点我的子节点，有本事点一个你试试看？", open:true, status: 1},
            { id:21, pId:2, name:"叶子节点2 - 1", desc:"你哪个单位的？敢随便点我？小心点儿..", status: 1},
            { id:22, pId:2, name:"叶子节点2 - 2", desc:"我有老爸罩着呢，点击我的小心点儿..", isCollapse:false, status: 1},
            
            { id:3, pId:0, name:"叶子节点3 - 1", desc:"唉，随便点我吧", status: 1},
            { id:32, pId:3, name:"叶子节点3 - 2", desc:"唉，随便点我吧", status: 1},
            { id:33, pId:3, name:"叶子节点3 - 3", desc:"唉，随便点我吧", status: 1}
        ];

        function onClick(event, treeId, treeNode, clickFlag) {
            $("#objectId").val(treeNode && treeNode.objectId ? treeNode.objectId : "");
            $("#name").val(treeNode.name);
            $("#id").val(treeNode.id);
            $("#pId").val(treeNode && treeNode.pId ? treeNode.pId : 0);
            $("#desc").val(treeNode && treeNode.desc ? treeNode.desc : "");
            $("#uri").val(treeNode.uri);
            $("#statusE").prop('checked', +treeNode.status==1);
            $("#statusD").prop('checked', +treeNode.status==0);
            $("#isCollapse").prop('checked', treeNode.isCollapse);
            $("#order").val(treeNode && treeNode.order ? treeNode.order : "");
            treeCurNode = treeNode;
        }
        
        function loadTree(type) {
            bmobHelper.getRecords({
                tableName: 'my_sites',
                search: {
                    queries: [{
                        criteria: "type",
                        condition: "==",
                        value: type,
                    }],
                    orders: ["order"],
                    limit: 1000
                },
            }).then(function(res){
                zNodes = []
                res.forEach((item, i) => {
                    item.data.objectId = item.objectId;
                    item.data.open = i == 0;
                    item.data.order = item.order;
                    zNodes.push(item.data);
                });
                console.log('zNodes:', zNodes)
                treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                $("#side-tree-btns").show();
            });
        }
        
        var treeObj, treeCurNode, siteNodes=[], site_list=[];
        $(document).ready(function(){
            
            $("#btnExport").click(function(){   
                var type = $("[name='siteType']:checked").val()*1;
                bmobHelper.getRecords({
                    tableName: 'my_sites',
                    search: {
                        queries: [{
                            criteria: "type",
                            condition: "==",
                            value: type,
                        }],
                        orders: ["order"],
                        limit: 1000,
                    },
                    callback: function(res) {
                        var siteNodes=[]
                        res.forEach(item => {
                            if (item.data.pId.toString() === "0") { 
                                item.data.children=[]; 
                                item.data.added=true; 
                                siteNodes.push(item.data); 
                            }
                        });
                        resetNode(res, siteNodes, true);
                        site_list = siteNodes;
                        var content = (type == 2 ? "const others_site_list = " : "const site_list = ") + JSON.stringify(siteNodes);
                        console.log(content);
                        var file = new File([content], type == 2 ? "others.js" : "index.js", { type: "text/plain;charset=utf-8" })
                        saveAs(file)
                    }
                });
                
            });
            
            $("#btnResetId").click(function(){
                return;
                //pls click export first to get site_list
                var type = $("[name='siteType']:checked").val()*1;
                var order=1,  order2=100, order3=1000;
                var day = new Date();
                day.setTime(day.getTime());
                var dayTime = day.getFullYear()+"-" + (day.getMonth()+1) + "-" + day.getDate();
                var tableName = 'my_sites_'+dayTime;
                
                site_list.forEach(item=>{
                    if (item.children) {
                        item.children.forEach(item2 => {
                            if (item2.children) {
                                item2.children.forEach(item3 => {
                                    bmobHelper.saveRecord({
                                        tableName,
                                        record: {type, data:item3, order:order3},
                                    });
                                    order3 = order3+100;
                                })
                            }
                            item2.children=[];  
                            bmobHelper.saveRecord({
                                tableName,
                                record: {type, data:item2, order:order2}
                            });
                            order2 = order2+10;
                        })
                    }
                    item.children=[]; 
                    bmobHelper.saveRecord({
                        tableName,
                        record: {type, data:item, order}
                    });
                    order=order+5;
                })
            });
            
            $("#btnDelete").click(function(){
                var type = $("[name='siteType']:checked").val()*1;
                var objectId = $("#objectId").val().trim();
                
                bmobHelper.deleteRecord({
                    tableName: 'my_sites',
                    id: objectId,
                }).then(function() {
                    loadTree(type);
                });
            });
            $("#btnSubmit").click(function(){
                var type = $("[name='siteType']:checked").val()*1;
                var name = $("#name").val().trim();
                var id = $("#id").val().trim();
                var pId = $("#pId").val().trim();
                var objectId = $("#objectId").val().trim();
                var desc = $("#desc").val().trim();
                var uri = $("#uri").val().trim();
                var order = $("#order").val().trim()*1;
                var isCollapse = $("#isCollapse").attr("checked");
                var status = $("[name='status']:checked").val();
                
                if (name == "" || id == "" || pId == "") {
                    $("#showMsg").html("Please input value").show();
                }
                
                var record = {
                    type, 
                    data: {
                        name,
                        id,
                        pId,
                        desc,
                        uri,
                        status,
                        isCollapse,
                    }, 
                    order
                };
                if (objectId && objectId != "") {
                    record.id = objectId;
                }
                bmobHelper.saveRecord({
                    tableName: 'my_sites',
                    record,
                }).then(function() {
                    loadTree(type);
                });
            
            });
        });
        
    </script>
    <style type="text/css">
    .hide{display:none;}
    </style>
</head>
<body id="ng-app" ng-app="bodyApp">
<div class="d-flex flex-column flex-root">
			<!--begin::Page-->
			<div class="d-flex flex-row flex-column-fluid page">
				<!--begin::Wrapper-->
				<div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
					
					<!--begin::Content-->
					<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
						
						<!--begin::Entry-->
						<div class="d-flex flex-column-fluid">
							<!--begin::Container-->
							<div class="container">
								<div class="row">
									<div class="col-xl-4">
										<!--begin::Card-->
										<div class="card card-custom gutter-b example example-compact">
											<div class="card-header">
												<h3 class="card-title">Site Type</h3>
												<div class="card-toolbar">
													<div class=" col-form-label">
															<div class="radio-inline">
																<label class="radio radio-success">
																<input type="radio" name="siteType" id="siteType1" value="1" onchange="loadTree(1)">
																<span></span>CDC Sites</label>
																<label class="radio radio-success">
																<input type="radio" name="siteType" id="siteType2" value="2" onchange="loadTree(2)">
																<span></span>Favorites Sites</label>
																
															</div>
															
														</div>
												</div>
											</div>
											<div class="card-body">
                                                <ul id="treeDemo" class="ztree"></ul>
                                                <div id="side-tree-btns" style="display:none;">
                                                    <button type="button" id="btnExport" class="btn btn-success mb-2" >Export</button>
                                                    <button type="button" id="btnResetId" class="btn btn-outline-success disabled mb-2" >Reset Id</button>
                                                </div>
											</div>
										</div>
										<!--end::Card-->
										
									</div>
                                    
        <div class="col-8">
										<!--begin::Card-->
										<div class="card card-custom gutter-b example example-compact">
											<div class="card-header">
												<h3 class="card-title">Site edit</h3>
												<div class="card-toolbar">
												</div>
											</div>
											<div class="card-body">
        <form>
          <div class="form-row">
            <div id="showMsg" class=" alert alert-primary col-md-12" style="padding-left:20px; display:none;" role="alert">
               
            </div>
            <div class="form-group col-md-5">
              <label for="name">Site Name</label>
              <input type="text" class="form-control" id="name" placeholder="site name">
            </div>
            <div class="form-group col-md-2">
              <label for="id">Id</label>
              <input type="text" class="form-control" id="id">
            </div>
            <div class="form-group col-md-2">
              <label for="pId">ParentId</label>
              <input type="text" class="form-control" id="pId">
            </div>
            <div class="form-group col-md-3">
              <label for="pId">ObjectId</label>
              <input type="text" class="form-control" id="objectId">
            </div>
          </div>
          <div class="form-group">
            <label for="name">Site Desc</label>
            <input type="text" class="form-control" id="desc" placeholder="site description">
          </div>
          <div class="form-group">
            <label for="url">Url</label>
            <input type="text" class="form-control" id="uri" placeholder="http://www.cdcsites.com">
          </div>
          <div class="form-row">
            <div class="form-group col-md-4"> 
                <label for="status">Status</label><br/>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="status" id="statusE" value="1" checked>
                  <label class="form-check-label" for="statusE">Enable</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="status" id="statusD" value="0" >
                  <label class="form-check-label" for="statusD">Disable</label>
                </div>
            </div>
            <div class="form-group col-md-4">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="isCollapse">
                  <label class="form-check-label" for="isCollapse">
                    Is collapse
                  </label>
                </div>
            </div>
            <div class="form-group col-md-4">
                <label for="order">Order</label>
                <input type="text" class="form-control" id="order">
            </div>
          </div>
          <button type="button" id="btnSubmit" class="btn btn-primary mb-2">Submit</button>
          <button type="button" id="btnDelete" class="btn btn-secondary mb-2">Delete</button>
        </form>
        </div>
        </div>
    </div>
    
								</div>
							</div>
							<!--end::Container-->
						</div>
						<!--end::Entry-->
					</div>
					<!--end::Content-->
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Page-->
		</div>
  <div class="container-md">
    <div class='row'>
         
      </div>
    </div>
    <div class="row">
        <div class="col-4" id="side-box-tree">
            <ul id="treeDemo" class="ztree"></ul>
            <div id="side-tree-btns" style="display:none;">
                <button type="button" id="btnExport" class="btn btn-info mb-2" >Export</button>
                <button type="button" id="btnResetId" class="btn btn-outline-info disabled mb-2" >Reset Id</button>
            </div>
        </div>
    </div>
  </div>
  
    <ul class="sticky-toolbar nav flex-column" style="padding:3px 2px; margin-top:4px;">
        <!--begin::Item-->
        <li class="nav-item mb-2" >
            <a onclick="$('#kt_quick_actions').addClass('offcanvas-on')"  class="btn btn-sm btn-icon btn-bg-light btn-icon-primary btn-hover-primary" href="javascript:void(0);">
                <span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Navigation\Arrow-from-right.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24"/>
    <rect fill="#000000" opacity="0.3" transform="translate(10.000000, 12.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000000, -12.000000) " x="9" y="5" width="2" height="14" rx="1"/>
    <rect fill="#000000" opacity="0.3" x="19" y="3" width="2" height="18" rx="1"/>
    <path d="M1.7071045,15.7071045 C1.3165802,16.0976288 0.683415225,16.0976288 0.292890933,15.7071045 C-0.0976333589,15.3165802 -0.0976333589,14.6834152 0.292890933,14.2928909 L6.29289093,8.29289093 C6.67146987,7.914312 7.28105631,7.90106637 7.67572234,8.26284357 L13.6757223,13.7628436 C14.0828413,14.136036 14.1103443,14.7686034 13.7371519,15.1757223 C13.3639594,15.5828413 12.7313921,15.6103443 12.3242731,15.2371519 L7.03007346,10.3841355 L1.7071045,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(7.000001, 11.999997) scale(-1, -1) rotate(90.000000) translate(-7.000001, -11.999997) "/>
</g>
</svg><!--end::Svg Icon--></span>
            </a>
        </li>
        <!--end::Item-->
    </ul>
    
<div id="kt_quick_actions" class="offcanvas offcanvas-right p-10 ">
        <!--begin::Header-->
        <div class="offcanvas-header d-flex align-items-center justify-content-between pb-10" kt-hidden-height="56" style="">
            <h3 class="font-weight-bold m-0">Quick Menus
            <small class="text-muted font-size-sm ml-2">finance &amp; reports</small></h3>
            <a href="#" onclick="$('#kt_quick_actions').removeClass('offcanvas-on')" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_actions_close">
                <span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Navigation\Close.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
    <rect x="0" y="7" width="16" height="2" rx="1"/>
    <rect opacity="0.3" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " x="0" y="7" width="16" height="2" rx="1"/>
</g>
</g>
</svg><!--end::Svg Icon--></span>
            </a>
        </div>
        <!--end::Header-->
        <!--begin::Content-->
        <div class="offcanvas-content pr-5 mr-n5 scroll ps ps--active-y" style="overflow: hidden;">
            <div class="row gutter-b">
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/index.html" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                        <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                        <!--begin::Svg Icon | path:assets/media/svg/icons/Shopping/Euro.svg-->
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <path d="M4.3618034,10.2763932 L4.8618034,9.2763932 C4.94649941,9.10700119 5.11963097,9 5.30901699,9 L15.190983,9 C15.4671254,9 15.690983,9.22385763 15.690983,9.5 C15.690983,9.57762255 15.6729105,9.65417908 15.6381966,9.7236068 L15.1381966,10.7236068 C15.0535006,10.8929988 14.880369,11 14.690983,11 L4.80901699,11 C4.53287462,11 4.30901699,10.7761424 4.30901699,10.5 C4.30901699,10.4223775 4.32708954,10.3458209 4.3618034,10.2763932 Z M14.6381966,13.7236068 L14.1381966,14.7236068 C14.0535006,14.8929988 13.880369,15 13.690983,15 L4.80901699,15 C4.53287462,15 4.30901699,14.7761424 4.30901699,14.5 C4.30901699,14.4223775 4.32708954,14.3458209 4.3618034,14.2763932 L4.8618034,13.2763932 C4.94649941,13.1070012 5.11963097,13 5.30901699,13 L14.190983,13 C14.4671254,13 14.690983,13.2238576 14.690983,13.5 C14.690983,13.5776225 14.6729105,13.6541791 14.6381966,13.7236068 Z" fill="#000000" opacity="0.3"></path>
                                <path d="M17.369,7.618 C16.976998,7.08599734 16.4660031,6.69750122 15.836,6.4525 C15.2059968,6.20749878 14.590003,6.085 13.988,6.085 C13.2179962,6.085 12.5180032,6.2249986 11.888,6.505 C11.2579969,6.7850014 10.7155023,7.16999755 10.2605,7.66 C9.80549773,8.15000245 9.45550123,8.72399671 9.2105,9.382 C8.96549878,10.0400033 8.843,10.7539961 8.843,11.524 C8.843,12.3360041 8.96199881,13.0779966 9.2,13.75 C9.43800119,14.4220034 9.7774978,14.9994976 10.2185,15.4825 C10.6595022,15.9655024 11.1879969,16.3399987 11.804,16.606 C12.4200031,16.8720013 13.1129962,17.005 13.883,17.005 C14.681004,17.005 15.3879969,16.8475016 16.004,16.5325 C16.6200031,16.2174984 17.1169981,15.8010026 17.495,15.283 L19.616,16.774 C18.9579967,17.6000041 18.1530048,18.2404977 17.201,18.6955 C16.2489952,19.1505023 15.1360064,19.378 13.862,19.378 C12.6999942,19.378 11.6325049,19.1855019 10.6595,18.8005 C9.68649514,18.4154981 8.8500035,17.8765035 8.15,17.1835 C7.4499965,16.4904965 6.90400196,15.6645048 6.512,14.7055 C6.11999804,13.7464952 5.924,12.6860058 5.924,11.524 C5.924,10.333994 6.13049794,9.25950479 6.5435,8.3005 C6.95650207,7.34149521 7.5234964,6.52600336 8.2445,5.854 C8.96550361,5.18199664 9.8159951,4.66400182 10.796,4.3 C11.7760049,3.93599818 12.8399943,3.754 13.988,3.754 C14.4640024,3.754 14.9609974,3.79949954 15.479,3.8905 C15.9970026,3.98150045 16.4939976,4.12149906 16.97,4.3105 C17.4460024,4.49950095 17.8939979,4.7339986 18.314,5.014 C18.7340021,5.2940014 19.0909985,5.62999804 19.385,6.022 L17.369,7.618 Z" fill="#000000"></path>
                            </g>
                        </svg>
                        <!--end::Svg Icon-->
                    </span>
                    <span class="d-block font-weight-bold font-size-h6 mt-2">CDC Sites</span>
                    </a>
                </div>
                <!--end::Item-->
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/others.html" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                        <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                            <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\General\Half-star.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24"/>
    <path d="M12,4.25932872 C12.1488635,4.25921584 12.3000368,4.29247316 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 L12,4.25932872 Z" fill="#000000" opacity="0.3"/>
    <path d="M12,4.25932872 L12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.277344,4.464261 11.6315987,4.25960807 12,4.25932872 Z" fill="#000000"/>
</g>
</svg><!--end::Svg Icon--></span>
                        <span class="d-block font-weight-bold font-size-h6 mt-2">Others sites</span>
                    </a>
                </div>
                <!--end::Item-->
            </div>
            <div class="row gutter-b">
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/sharefish/index.html#!/note" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                    <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                        <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Communication\Clipboard-check.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M8,3 L8,3.5 C8,4.32842712 8.67157288,5 9.5,5 L14.5,5 C15.3284271,5 16,4.32842712 16,3.5 L16,3 L18,3 C19.1045695,3 20,3.8954305 20,5 L20,21 C20,22.1045695 19.1045695,23 18,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,5 C4,3.8954305 4.8954305,3 6,3 L8,3 Z" fill="#000000" opacity="0.3"/>
<path d="M10.875,15.75 C10.6354167,15.75 10.3958333,15.6541667 10.2041667,15.4625 L8.2875,13.5458333 C7.90416667,13.1625 7.90416667,12.5875 8.2875,12.2041667 C8.67083333,11.8208333 9.29375,11.8208333 9.62916667,12.2041667 L10.875,13.45 L14.0375,10.2875 C14.4208333,9.90416667 14.9958333,9.90416667 15.3791667,10.2875 C15.7625,10.6708333 15.7625,11.2458333 15.3791667,11.6291667 L11.5458333,15.4625 C11.3541667,15.6541667 11.1145833,15.75 10.875,15.75 Z" fill="#000000"/>
<path d="M11,2 C11,1.44771525 11.4477153,1 12,1 C12.5522847,1 13,1.44771525 13,2 L14.5,2 C14.7761424,2 15,2.22385763 15,2.5 L15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L9.5,4 C9.22385763,4 9,3.77614237 9,3.5 L9,2.5 C9,2.22385763 9.22385763,2 9.5,2 L11,2 Z" fill="#000000"/>
</g>
</svg><!--end::Svg Icon--></span>
                    <span class="d-block font-weight-bold font-size-h6 mt-2">Note</span>
                </a>
                </div>
                <!--end::Item-->
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/sharefish/index.html#!/note2" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                        <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                            <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Tools\Hummer.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <rect x="0" y="0" width="24" height="24"/>
    <path d="M18.4246212,12.6464466 L21.2530483,9.81801948 C21.4483105,9.62275734 21.764893,9.62275734 21.9601551,9.81801948 L22.6672619,10.5251263 C22.862524,10.7203884 22.862524,11.0369709 22.6672619,11.232233 L19.8388348,14.0606602 C19.6435726,14.2559223 19.3269901,14.2559223 19.131728,14.0606602 L18.4246212,13.3535534 C18.2293591,13.1582912 18.2293591,12.8417088 18.4246212,12.6464466 Z M3.22182541,17.9497475 L13.1213203,8.05025253 C13.5118446,7.65972824 14.1450096,7.65972824 14.5355339,8.05025253 L15.9497475,9.46446609 C16.3402718,9.85499039 16.3402718,10.4881554 15.9497475,10.8786797 L6.05025253,20.7781746 C5.65972824,21.1686989 5.02656326,21.1686989 4.63603897,20.7781746 L3.22182541,19.363961 C2.83130112,18.9734367 2.83130112,18.3402718 3.22182541,17.9497475 Z" fill="#000000" opacity="0.3"/>
    <path d="M12.3890873,1.28248558 L12.3890873,1.28248558 C15.150511,1.28248558 17.3890873,3.52106183 17.3890873,6.28248558 L17.3890873,10.7824856 C17.3890873,11.058628 17.1652297,11.2824856 16.8890873,11.2824856 L12.8890873,11.2824856 C12.6129449,11.2824856 12.3890873,11.058628 12.3890873,10.7824856 L12.3890873,1.28248558 Z" fill="#000000" transform="translate(14.889087, 6.282486) rotate(-45.000000) translate(-14.889087, -6.282486) "/>
</g>
</svg><!--end::Svg Icon--></span>
                        <span class="d-block font-weight-bold font-size-h6 mt-2">Todo</span>
                    </a>
                </div>
                <!--end::Item-->
            </div>
            <div class="row gutter-b">
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/sudo" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                    <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                        <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Layout\Layout-grid.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<rect fill="#000000" opacity="0.3" x="4" y="4" width="4" height="4" rx="1"/>
<path d="M5,10 L7,10 C7.55228475,10 8,10.4477153 8,11 L8,13 C8,13.5522847 7.55228475,14 7,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,7 C14,7.55228475 13.5522847,8 13,8 L11,8 C10.4477153,8 10,7.55228475 10,7 L10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,10 L13,10 C13.5522847,10 14,10.4477153 14,11 L14,13 C14,13.5522847 13.5522847,14 13,14 L11,14 C10.4477153,14 10,13.5522847 10,13 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M17,4 L19,4 C19.5522847,4 20,4.44771525 20,5 L20,7 C20,7.55228475 19.5522847,8 19,8 L17,8 C16.4477153,8 16,7.55228475 16,7 L16,5 C16,4.44771525 16.4477153,4 17,4 Z M17,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 L17,14 C16.4477153,14 16,13.5522847 16,13 L16,11 C16,10.4477153 16.4477153,10 17,10 Z M5,16 L7,16 C7.55228475,16 8,16.4477153 8,17 L8,19 C8,19.5522847 7.55228475,20 7,20 L5,20 C4.44771525,20 4,19.5522847 4,19 L4,17 C4,16.4477153 4.44771525,16 5,16 Z M11,16 L13,16 C13.5522847,16 14,16.4477153 14,17 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,17 C10,16.4477153 10.4477153,16 11,16 Z M17,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,19 C20,19.5522847 19.5522847,20 19,20 L17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,16.4477153 16.4477153,16 17,16 Z" fill="#000000"/>
</g>
</svg><!--end::Svg Icon--></span>

                    <span class="d-block font-weight-bold font-size-h6 mt-2">Sudo</span>
                </a>
                </div>
                <!--end::Item-->
                <!--begin::Item-->
                <div class="col-6">
                    <a href="/admin.html" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                        <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                            <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\General\User.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg><!--end::Svg Icon--></span>
                        <span class="d-block font-weight-bold font-size-h6 mt-2">Admin</span>
                    </a>
                </div>
                <!--end::Item-->
            </div>
            <div class="row">
                <!--begin::Item-->
                <div class="col-6" id="fn-setting-btn">
                    <a href="javascript:void(0)" onclick="$('#fn-setting-btn').addClass('hide');$('#fn-setting').removeClass('hide')" class="btn btn-block btn-light btn-hover-primary text-dark-50 text-center py-10 px-5">
                        <span class="svg-icon svg-icon-3x svg-icon-primary m-0">
                            <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\General\User.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg><!--end::Svg Icon--></span>
                        <span class="d-block font-weight-bold font-size-h6 mt-2">Setting</span>
                    </a>
                </div>
                <!--end::Item-->
                <!--begin::Setting Item-->
                <div class="col-12 hide" id="fn-setting">
                    <div class="tab-pane fade pt-3 pr-5 mr-n5 scroll ps active show ps--active-y" id="kt_quick_panel_settings" role="tabpanel" style="height: 476px; overflow: hidden;">
                        <div class="offcanvas-header offcanvas-header-navs d-flex align-items-center justify-content-between mb-5"  style="">
                <ul class="nav nav-bold nav-tabs nav-tabs-line nav-tabs-line-3x nav-tabs-primary flex-grow-1 px-10" role="tablist">
                    
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#kt_quick_panel_settings">Settings</a>
                    </li>
                </ul>
                <div class="offcanvas-close mt-n1 pr-5">
                    <a href="javascript:void(0)" onclick="$('#fn-setting-btn').removeClass('hide');$('#fn-setting').addClass('hide')" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_panel_close">
                        <span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo9\dist/../src/media/svg/icons\Navigation\Close.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
        <rect x="0" y="7" width="16" height="2" rx="1"/>
        <rect opacity="0.3" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " x="0" y="7" width="16" height="2" rx="1"/>
    </g>
</g>
</svg><!--end::Svg Icon--></span>
                    </a>
                </div>
            </div>
                            <!--begin::Section-->
                            <div>
                                <div class="form-group mb-0 row align-items-center">
                                    <label class="col-8 col-form-label">Enable Online:</label>
                                    <div class="col-4 d-flex justify-content-end">
                                        <span class="switch switch-primary switch-sm">
                                            <label>
                                                <input id="cbSettingOnline" type="checkbox" checked="checked" >
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group mb-0 row align-items-center">
                                    <label class="col-8 col-form-label">Enable Others:</label>
                                    <div class="col-4 d-flex justify-content-end">
                                        <span class="switch switch-primary switch-sm">
                                            <label>
                                                <input type="checkbox" name="quick_panel_notifications_2">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!--end::Section-->
                        
                    </div>
                </div>
                <!--end::Setting Item-->
            <!--end::Content-->
            </div>
        </div>
    </div>

</body>
</html>